@if (loading) {
  <div class="m-y flex justify-center items-center">
    <app-spinner class="m-y" [content]="{ color: 'primary', size: 40 }" />
  </div>
}
@if (content && pager) {
  <div class="search-list">
    <div class="container">
      <div class="md:px-3 md:mt-[40px]">
        <div class="results m-bottom-sm">找到 {{ pager?.totalItems }} 个结果</div>
        <mat-divider />
        <div [class]="wrapperClasses">
          @for (item of content | paginate: pager; track item) {
            <app-custom-template
              [class]="colClasses"
              [content]="{ json: item, html: template, isAPI: false, type: 'custom-template' }"
            />
          }
        </div>
        @if (pager) {
          <div class="pager my-5">
            <mat-paginator
              class="demo-paginator"
              (page)="onPageChange($event)"
              [length]="pager.totalItems"
              [pageSize]="pager.itemsPerPage"
              [showFirstLastButtons]="true"
              [hidePageSize]="true"
              [pageIndex]="pager.currentPage"
              aria-label="Select page"
            />
          </div>
        } @else {
          <div class="text-center py-10">
            <p>没有数据。</p>
          </div>
        }
      </div>
    </div>
  </div>
}
